<template>
  <div id="app">
    <el-container class="container">
      <el-header class="header">
        <h1>支付交易管理系统</h1>
      </el-header>
      <el-container>
        <el-aside width="200px" class="aside">
          <el-menu :default-active="activeMenu" class="el-menu-vertical" @select="handleMenuSelect">
            <el-menu-item index="transaction-list">
              <i class="el-icon-document"></i>
              <span slot="title">交易记录列表</span>
            </el-menu-item>
            <el-menu-item index="transaction-upload">
              <i class="el-icon-upload2"></i>
              <span slot="title">上传账单</span>
            </el-menu-item>
            <el-menu-item index="transaction-add">
              <i class="el-icon-plus"></i>
              <span slot="title">手动添加</span>
            </el-menu-item>
            <el-submenu index="stats">
              <template slot="title">
                <i class="el-icon-s-data"></i>
                <span>统计分析</span>
              </template>
              <el-menu-item index="transaction-partner-stats">
                <i class="el-icon-user"></i>
                <span slot="title">交易对象统计</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main class="main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      activeMenu: 'transaction-list'
    }
  },
  methods: {
    handleMenuSelect(key) {
      this.activeMenu = key
      this.$router.push(`/${key}`)
    }
  },
  created() {
    // 根据当前路由设置激活菜单
    const path = this.$route.path.substring(1)
    if (path) {
      this.activeMenu = path
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

#app {
  height: 100%;
}

.container {
  height: 100vh;
}

.header {
  background-color: #1890ff;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header h1 {
  font-size: 20px;
  font-weight: 500;
}

.aside {
  background-color: #fff;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.04);
}

.main {
  padding: 20px;
  background-color: #f5f7fa;
  overflow-y: auto;
}

.el-menu-vertical {
  height: 100%;
}
</style>